<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>WebSocket</title>
  <script src="socket.io.js"></script>
</head>

<body>
  <h1>Chat Room</h1>
  <input type="text" id="sendTxt" />
  <button id="sendBtn">发送</button>
  <div id="recv"></div>
  <script>
    var socket = io('ws://localhost:3000')

    function showMessage(str, type) {
      var div = document.createElement('div')
      div.innerHTML = str
      if (type == "enter") {
        div.style.color = "blue"
      } else if (type == "leave") {
        div.style.color = "red"
      }
      document.body.appendChild(div)
    }


    document.getElementById('sendBtn').onclick = function () {
      let txt = document.getElementById('sendTxt').value
      if (txt) {
        socket.emit('message', txt)
      }
    }

    socket.on('enter', function(data) {
      showMessage(data, 'enter')
    })

    socket.on('message', function(data) {
      showMessage(data, 'message')
    })

    socket.on('leave', function(data) {
      showMessage(data, 'leave')
    })

  </script>
</body>

</html>